<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>036-浮动后的影响</title>
		<style>
			.outer {
				width: 600px;
				background-color: gray;
				border: 1px solid black;
			}

			/* 布局中有一个原则：父元中的子元素，要么全部浮动，要么全部不浮动 */
			/* 解决浮动产生的问题最优雅的方式 */
			.outer::after {
				content: '';
				display: block;
				clear: both;
			}

			.box {
				width: 100px;
				height: 100px;
				background-color: skyblue;
				border: 1px solid black;
				margin: 10px;
			}

			.box1,
			.box2,
			.box3,
			.box4 {
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="outer">
			<div class="box box1">1</div>
			<div class="box box2">2</div>
			<div class="box box3">3</div>
			<div class="box box4">4</div>
		</div>

		<!-- <div style="background-color: pink">
			Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim, ab provident, commodi earum rerum at fugit
			exercitationem modi omnis nihil accusamus reiciendis perspiciatis odit architecto a saepe? Modi, ipsa maxime
			dignissimos ipsam quidem dolores ratione tenetur temporibus quia et eligendi quo sequi velit nemo eaque iste
			possimus quibusdam nobis, aliquid labore quaerat! Corrupti soluta quae unde tenetur recusandae velit nobis
			possimus accusantium quas, odit dignissimos ad qui quidem dolorem illo ut obcaecati minus? Natus commodi nulla
			repudiandae dolore quod doloribus earum sapiente laborum obcaecati exercitationem accusantium ipsam ipsa numquam
			ullam officiis eligendi maxime, quia voluptatem, aspernatur eius et. Veritatis, eligendi?
		</div> -->
	</body>
</html>
